import 'package:flutter/material.dart';

// 无缝滚动的每一个Item项， 包含了三部分，图片，名字和简介
// 因为父组件在做个一个针对数组的遍历，因此当前组件会被横向排列好多次
class HomeScrollItem extends StatelessWidget {
  // 类的重写，系统提供的固定写法， 再定义 传递过来的参数：item，这个是数组数据的每一项
  HomeScrollItem({Key key, @required this.item}) : super(key: key);
  final Map item;

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 127,
      margin: EdgeInsets.fromLTRB(5, 0, 5, 0),
      // Column代表纵向排版，里面有一个数组，从上到下排列。分别是图片，名字，简介
      child: Column(
        children: <Widget>[
          // 图片区域
          Container(
            width: 127,
            height: 178,
            margin: EdgeInsets.only(bottom: 5),
            child: Image(
              image: NetworkImage('${item["img"]}'),
              fit: BoxFit.cover,
            ),
          ),
          // 名字区域
          Padding(
            padding: EdgeInsets.only(bottom: 5),
            child: Text(
              '${item["name"]}',
              style: TextStyle(fontSize: 16),
            ),
          ),
          // 简介区域
          Text(
            '${item["dra"]}',
            // 设置文字溢出 点点点
            overflow: TextOverflow.ellipsis,
            maxLines: 2,
            style: TextStyle(fontSize: 13, color: Colors.grey),
          ),
        ],
      ),
    );
  }
}
